<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import SvgIcon from './components/SvgIcon.vue'

const liItems = ref([
  { title: '首页', url: '/juejin', isActive: true },
  { title: 'BOT', url: '/bots', isActive: false },
  { title: '沸点', url: '/pins', isActive: false },
  { title: '课程', url: '/course', isActive: false },
  { title: '直播', url: '/live', isActive: false },
  { title: '活动', url: '/events/all', isActive: false },
  { title: 'AI刷题', url: '/problemset', isActive: false },
])

const toggleActive = (item: { isActive: boolean }) => {
  for (let i = 0; i < liItems.value.length; i++) {
    liItems.value[i].isActive = false
  }
  item.isActive = !item.isActive
}
</script>

<template>
  <div class="header">
    <div class="container">
      <h1 class="logo">
        <a href="#"
          ><img
            src="https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
            alt="稀土掘金"
        /></a>
      </h1>
      <div class="main-nav">
        <ul class="main-nav-left">
          <template v-for="item in liItems" :key="item.title">
            <li
              class="nav-item outline"
              :class="{ active: item.isActive }"
              @click="toggleActive(item)"
            >
              <RouterLink :to="{ path: item.url }">
                <a href="#">{{ item.title }}</a>
              </RouterLink>
            </li>
          </template>
          <li class="nav-item"><a href="#">商城</a></li>
          <li class="nav-item"><a href="#">APP</a></li>
          <li class="nav-item"><a href="#">插件</a></li>
          <!-- <li class="nav-item">
            <a href="#"
              ><img
                src="./img/0913958971aceafc8b2c6fc1519ceb2a.png~tplv-k3u1fbpfcp-jj-mark-v1_0_0_0_0_IA==_q75.png"
                alt="AGI知识库"
            /></a>
          </li> -->
        </ul>
        <div class="main-nav-right">
          <div class="search-item">
            <form class="search-form" action="#">
              <input type="text" placeholder="探索稀土掘金" />
              <div>
                <SvgIcon name="SearchFormSvg" size="18px" style="color: #86909c" />
              </div>
            </form>
            <div class="create-center">
              <button class="create-center-btn">
                <a href="#">创作者中心</a>
              </button>
              <div class="create-center-more">
                <SvgIcon name="CenterMore" size="12px" />
              </div>
            </div>
          </div>
          <div class="vip">
            <div class="vip-entry">
              <img src="./assets/svg/VipSvg.svg" alt="vip" class="vip-entry-img" />
            </div>
            <div class="vip-words">会员</div>
          </div>
          <div class="login-item">
            <button class="login-item-btn">
              登录
              <div class="login-item-btn-inner">
                <div class="login-item-btn-line"></div>
                注册
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <RouterView></RouterView>
</template>
<style lang="scss" scoped></style>
